<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import myAxios from "../../../plugins/myAxios.js";

// 列表数据
const tableData = ref([])
// 分页参数
const pagination = ref({
  current: 1,
  pageSize: 10,
  total: 0
})

// 搜索条件
const searchForm = ref({
  noticeTitle: '',
  createTimeRange: [],
  status: ''
})

// 状态选项
const statusOptions = [
  { label: '全部', value: '' },
  { label: '已发布', value: 0 }
]

// 获取通知列表数据
const getNoticeList = async () => {
  try {
    const { current, pageSize } = pagination.value
    const params = {
      current,
      pageSize,
      noticeTitle: searchForm.value.noticeTitle,
      status: searchForm.value.status,
      startTime: searchForm.value.createTimeRange?.[0],
      endTime: searchForm.value.createTimeRange?.[1]
    }
    const queryString = new URLSearchParams(params).toString()
    const res = await myAxios.get('/student/notice/page',{params})
    tableData.value = res.records
    pagination.value.total = res.total
  } catch (error) {
    ElMessage.error('获取通知列表失败')
  }
}

// 搜索
const handleSearch = () => {
  pagination.value.current = 1
  getNoticeList()
}

// 重置搜索
const handleReset = () => {
  searchForm.value = {
    noticeTitle: '',
    createTimeRange: [],
    status: ''
  }
  handleSearch()
}

// 页码改变时触发
const handleCurrentChange = (val) => {
  pagination.value.current = val
  getNoticeList()
}

onMounted(() => {
  getNoticeList()
})
</script>

<template>
  <div class="notice-container">
    <!-- 搜索表单 -->
    <div class="search-form">
      <el-form :inline="true" :model="searchForm">
        <el-form-item label="通知标题">
          <el-input
            v-model="searchForm.noticeTitle"
            placeholder="请输入通知标题"
            clearable
          />
        </el-form-item>
        <el-form-item label="发布时间">
          <el-date-picker
            v-model="searchForm.createTimeRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="YYYY-MM-DD"
          />
        </el-form-item>
        <el-form-item label="状态" style="width: 130px">
          <el-select v-model="searchForm.status" placeholder="请选择状态">
            <el-option
              v-for="item in statusOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">搜索</el-button>
          <el-button @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 通知列表 -->
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="noticeTitle" label="通知标题" />
      <el-table-column prop="noticeContent" label="通知内容" show-overflow-tooltip />
      <el-table-column prop="createBy" label="发布人" width="120" />
      <el-table-column prop="createTime" label="发布时间" width="180">
        <template #default="scope">
          {{ new Date(scope.row.createTime).toLocaleString() }}
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态" width="100">
        <template #default="scope">
          <el-tag type="success" v-if="scope.row.status === 0">已发布</el-tag>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div class="pagination">
      <el-pagination
        v-model:current-page="pagination.current"
        :page-size="pagination.pageSize"
        :total="pagination.total"
        @current-change="handleCurrentChange"
        layout="total, prev, pager, next"
      />
    </div>
  </div>
</template>

<style scoped>
.notice-container {
  padding: 20px;
}

.search-form {
  margin-bottom: 20px;
  padding: 20px;
  background-color: #f5f7fa;
  border-radius: 4px;
}

.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}
</style>